<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车（循环数组对象）</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="./index.js"></script>
    <script src="./js/data.js"></script>
</head>

<body>
    <div class="shop-cart">
        <div class="tabs">
            <div class="border">
                <!-- data-*表示自定义属性。 -->
                <div class="title active" data-index="0">
                    全部商品
                    <span class="count">3</span>
                </div>
                <div class="title" data-index="1">
                    降价商品
                    <span class="count">0</span>
                </div>
                <div class="title last" data-index="2">
                    库存紧张
                    <span class="count">0</span>
                </div>
                <div class="line"></div>
            </div>
        </div>

        <div class="lists">
            <div class="header">
                <ul class="clearfix">
                    <li>
                        <input type="checkbox" class="select-all">
                        <label>全选</label>
                    </li>
                    <li class="product-info">商品信息</li>
                    <li>单价</li>
                    <li>数量</li>
                    <li>金额</li>
                    <li>操作</li>
                </ul>
            </div>
            <div class="shoplist">

            </div>
        </div>

        <div class="operate">
            <div class="left">
                <input type="checkbox" class="select-all-footer">
                <a href="javascript:void(0);">删除</a>
            </div>

            <div class="right">
                <div>已选择商品<span class="selected-count">0</span>件</div>
                <div class="amount">合计（不含运费）： <span class="sum">￥0.00</span></div>
                <a href="javascript:void(0);" class="settle">结算</a>
            </div>
        </div>
    </div>
    <script>
        var shoplist = document.querySelector('.shoplist')
        // console.log(shopcarts)
        for (let m = 0; m < shopcarts.length; m++) {
            // console.log(shopcarts[m])
            let itemList = shopcarts[m].products
            // console.log(itemList)
            let div = document.createElement('div')
            div.className = 'shop'
            div.innerHTML = `
            <div class="shop-info">
                        <input type="checkbox">
                        <span class="shop-tip">店铺：</span>
                        <a class="shop-name" href="#">${shopcarts[m].shopName}</a>
                        <a href="#" class="wangwang">旺旺</a>
                    </div>
                    `
            let div1 = document.createElement('div')
            div1.className = 'products'
            div1.innerHTML = ''
            for (let m = 0; m < itemList.length; m++) {
                console.log(itemList[m])
                // console.log(itemList[m])
                div1.innerHTML += `
                        <div class="item">
                            <div class="select-logo">
                                <input type="checkbox">
                                <img src=${itemList[m].topImg} alt="产品logo">
                            </div>
                            <div class="product-detail">
                                <div class="left">
                                    <a href="#" class="product-name">
                                        ${itemList[m].productName}
                                    </a>
                                    <div class="logos">
                                        <a href="#" class="card">信用卡</a>
                                        <a href="#" class='service'>保障服务</a>
                                        <a href="#" class="order">订单险</a>
                                        <a href="#" class="seven">7天无理由</a>
                                    </div>
                                </div>
                                <div class="right">
                                    ${itemList[m].spec}
                                </div>
                            </div>
                            <div class="price">
                                <p class="market-price">￥${itemList[m].marketPrice}</p>
                                <p class="real-price">￥${itemList[m].price}</p>
                            </div>
                            <div class="count">
                                <span class="sub">-</span>
                                <span class="input"><input type="text" value="${itemList[m].count}"></span>
                                <span class="add">+</span>
                            </div>
                            <div class="amount">￥${itemList[m].amount}</div>
                            <div class="delete">
                                <a href="#">删除</a>
                            </div>
                        </div>`

            }
            div.appendChild(div1)
            // div.innerHTML += div1.innerHTML
            shoplist.appendChild(div)
            // shoplist.innerHTML += div.innerHTML
            // console.log(shoplist.innerHTML)
        }


        // 实现头部的动画
        var titles = document.querySelectorAll('.title')
        var line = document.querySelector('.line')
        for (let i = 0; i < titles.length; i++) {
            titles[i].addEventListener('mouseenter', function () {
                for (var j = 0; j < titles.length; j++) {
                    titles[j].classList.remove('active')
                }
                this.classList.add('active')
                line.style.left = i * line.offsetWidth + 'px'
            })
        }
    </script>
</body>

</html>